<template>
  <div class="com-container">
    <div class="com-chart" ref="NameWord_ref">
    </div>
  </div>
</template>

<script>
import indexdata from '@/api/data/indexdata'

export default {
  props: ['timecity'],
  watch: {
    timecity: {
      async handler (newVal) {
        await this.timeCityChart()
      },
      deep: true
    }
  },
  data () {
    return {
      chartInstance: null,//echarts实例对象
      allData: null,//服务器返回的数据
      currentPage: 1,//当前显示的页数
      totalPage: 0,//一共有多少页
      timerId: null,//定时器标识
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    //  在页面加载完成时，主动进行屏幕的适配
    this.screenAdapter()
  },
  created () {
  },
  destroyed () {
    clearInterval(this.timerId)
    //在组件销毁，需要将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)
  },
  //VUE生命周期
  methods: {
    async timeCityChart () {
      const timeCity = {}
      timeCity.startYear = this.timecity.startYear + '-01-01'
      timeCity.endYear = this.timecity.endYear + '-01-01'
      timeCity.city = this.timecity.city
      const res = await indexdata.getNameWordCloudByTimeCity(timeCity)
      const data = res.data.list
      if (typeof data === 'undefined') {
        await this.getData()
        return
      }
      //重新组合数据
      const subData = []
      for (let i in data) {
        subData.push({ [i]: data[i] })
      }
      this.allData = subData
      //  每五个元素显示一页 对 5 取余
      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
      this.updateChart()
    },
    initChart () {
      //  通过挂载的echarts全局对象初始化 this.$refs.NameWord_ref 传入图表挂载的 div
      this.chartInstance = this.$echarts.init(this.$refs.NameWord_ref, 'dark')
      //对图标初始化的配置
      const initOption = {
        title: {
          text: '历史人物姓氏分布',
          //位置
          left: 10,
          top: 10
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          //距离包含文字
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              width: 66,
              color: '#2D3443'
            }
          },
          formatter: function (res) {
            return res[0].axisValue + '氏\n' + res[0].data + '人'
          }
        },
        series: [
          {
            type: 'bar',
            //条柱宽度
            barWidth: 66,
            //  显示条柱的值
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              },
              formatter: function (res) {
                return ' ' + res.data + '人'
              }
            },
            //柱状图中每个条目样式的设计
            itemStyle: {
              //左上 右上 右下 左下
              barBorderRadius: [0, 33, 33, 0],
              //指明颜色渐变的方向 矩形四个角 左上角为（0,0）
              //指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //百分之0状态之下颜色的值
                {
                  offset: 0,
                  color: '#7ECBCE'
                },
                //百分之100状态之下颜色的值
                {
                  offset: 1,
                  color: '#EA7E53'
                }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)

      //  对图表事件进行监听 鼠标悬浮图表区域 停止图表的更新
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      //  鼠标移出图表区域
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
    //获取服务器的数据
    async getData () {
      const names = await indexdata.getLastNames()
      const data = names.data.list
      const subData = []
      for (let i in data) {
        subData.push({ [i]: data[i] })
      }
      this.allData = subData
      //  每五个元素显示一页 对 5 取余
      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
      //  获取数据之后进行数据的更新
      this.updateChart()
      //  启动定时器
      this.startInterval()
    },
    //更新图表
    updateChart () {
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      //从allData中取前五条数据 end 不包含结尾
      const showData = this.allData.slice(start, end)

      var figureName = []
      var NameNum = []
      //重新组合数据
      showData.forEach(item => {
        figureName.push(Object.keys(item)[0])
        NameNum.push(Object.values(item)[0])
      })

      const dataOption = {
        title: {
          text: this.timecity.city === '湖南省' ? ' 历史人物姓氏分布' : this.timecity.city + ' 历史人物姓氏分布'
        },
        yAxis: {
          data: figureName
        },
        series: [
          {
            data: NameNum,
          },
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    startInterval () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        if (this.currentPage > this.totalPage) {
          this.currentPage = 0
        }
        this.currentPage++
        this.updateChart()
      }, 3000)
    },
    //当浏览器大小变化的时候，会调用的方法，来完成屏幕的适配
    screenAdapter () {
      const titleFontSize = this.$refs.NameWord_ref.offsetWidth / 100 * 3.6
      //和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize / 1.2
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            }
          }
        },
        xAxis: {
          axisLabel: {
            fontSize: titleFontSize
          }
        },
        yAxis: {
          axisLabel: {
            fontSize: titleFontSize
          }
        },
        series: [
          {
            //条柱宽度
            barWidth: titleFontSize,
            //柱状图中每个条目样式的设计
            itemStyle: {
              //左上 右上 右下 左下
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
            label: {
              textStyle: {
                fontSize: titleFontSize / 2
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      //  手动调用图表对象的resize 才能产生效果
      this.chartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
